import React, { Component } from 'react'
import { withRouter } from 'react-router-dom/cjs/react-router-dom.min';
import { Layout, Menu, theme, Dropdown, Space, Avatar, message, Badge } from 'antd';
import logo from './logo.webp'
import { adminRoutes } from '../../routes';
import { DownOutlined } from '@ant-design/icons';
import { clearToken } from '../../utils/auth';
import { connect } from 'react-redux';

const { Header, Content, Sider } = Layout;


const routes = adminRoutes.filter(route => route.isShow).map(route => (
    {
        key: route.path,
        icon: route.icon,
        label: route.title,
    })
);

function Frame(props) {

    const popMenu = (
        <Menu onClick={(p) => {
            if (p.key == 'logout') {
                clearToken()
                props.history.push('/login')
            } else if (p.key == 'notice') {
                props.history.push('/admin/notice')
            } else {
                message.info(p.key)
            }
        }}>
            <Menu.Item key="notice">通知中心</Menu.Item>
            <Menu.Item key="setting">设置</Menu.Item>
            <Menu.Item key="logout">退出</Menu.Item>
        </Menu>
    )

    const popMenu2 = [
        {
            label: '通知中心',
            key: 'notice'
        },
        {
            label: '设置',
            key: 'setting'
        },
        {
            label: '退出',
            key: 'logout'
        }
    ]

    const menuClick = (key) => {
        message.info(key)
    }

    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();

    console.log('Frame', props)
    return (
        <Layout className='frame-match'>
            <Header
                style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    backgroundColor: '#ffffff'
                }}
            >
                <div className="demo-logo" style={{ alignItems: 'center', display: 'flex' }}>
                    <img src={logo} alt="logo" style={{ width: '120px' }} />
                </div>

                <Dropdown menu={{ items: popMenu2, onClick: menuClick }}>
                    <Space>
                        <Avatar>U</Avatar>
                        <Badge dot={!props.isAllRead}><span>超级管理员</span></Badge>
                        <DownOutlined />
                    </Space>
                </Dropdown>
            </Header>
            <Layout>
                <Sider
                    width={200}
                    style={{
                        background: colorBgContainer,
                    }}
                >
                    <Menu
                        mode="inline"
                        defaultSelectedKeys={['/admin/dashboard']}
                        style={{
                            height: '100%',
                            borderRight: 0,
                        }}
                        items={routes}
                        onClick={p => {
                            console.log('p=', p)
                            props.history.push(p.key)
                        }}
                    />
                </Sider>
                <Layout
                    style={{
                        padding: '15px 15px',
                    }}
                >
                    <Content
                        style={{
                            padding: '0px',
                            margin: 0,
                            minHeight: 280,
                            background: colorBgContainer,
                            borderRadius: borderRadiusLG,
                        }}
                    >
                        {props.children}
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    )
}

export default connect(state => state)(withRouter(Frame))